<template>
  <div class="Hz-charts">
    <div :id="id" class="charts" :ref="charts"></div>
  </div>
</template>

<script>
export default {
  name: 'HzCharts',
  props: {
    setting: Object,
    voltage: Array,
    id: String,
    charts: String
  },
  mounted: function () {
    // this.drawCharts()
  },
  methods: {

    drawPieChart () {
      this.chartPie = this.$echarts.init(document.getElementById(this.id))
      this.chartPie.setOption(this.setting)
    },
    drawCharts () {
      this.drawPieChart()
    }
  }
}
</script>

<style lang="scss" scoped>
.Hz-charts {
  width: 100%;
  height: 100%;
  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
